import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-09-14 09:37:08
-->
<route lang="json5" type="login">
{
  style: {
    navigationBarTitleText: '电子详情',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="w-screen h-screen flex flex-col box-border p-20rpx">
    <wd-cell-group border>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">送达文号:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.number }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">文件类型:</view>
            <view class="inline-block text-#5a5b5d">
              {{ promotionlist[caseData.fileType]?.label }}
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">被送达人姓名:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.acceptName }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">被送达人身份证号:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.acceptCard }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">被送达人联系方式:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.acceptPhone }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">案件编号:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.caseNumber }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">案件名称:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.caseName }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell title="检察官签名:" vertical>
        <wd-img
          v-if="caseData.proSignatureUrl"
          :width="200"
          :height="100"
          :src="baseurl + caseData.proSignatureUrl"
          :enable-preview="true"
        />
      </wd-cell>
      <wd-cell title="接收人签名:" vertical>
        <wd-img
          v-if="caseData.acceptSignatureUrl"
          :width="200"
          :height="100"
          :src="baseurl + caseData.acceptSignatureUrl"
          :enable-preview="true"
        />
      </wd-cell>
      <wd-cell title="相关附件:" vertical>
        <view class="text-#5a5b5d">
          <view v-for="(item, index) in filesList" class="flex" :key="index">
            <view class="mr-20rpx max-w-[80%]">
              {{ item.name }}
            </view>
            <wd-icon name="view" size="22px" @click="viewFileFn(item.url)"></wd-icon>
            <!-- <wd-icon name="download" size="22px" @click="downloadFun(item.url)"></wd-icon> -->
          </view>
        </view>
      </wd-cell>
      <wd-cell title="检察官备注:" vertical>
        <view>{{ caseData.proRemark }}</view>
      </wd-cell>
      <wd-cell title="接收人备注:" vertical>
        <view>{{ caseData.acceptRemark }}</view>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">签收状态:</view>
            <text
              class="text-28rpx text-#117B28 bg-#E4FFF0 px-30rpx py-10rpx border-rd-10rpx"
              v-if="caseData.status"
            >
              已签收
            </text>
            <text
              class="text-28rpx text-#E0400F bg-#FFEAE4 px-30rpx py-10rpx border-rd-10rpx"
              v-else
            >
              待签收
            </text>
          </view>
        </template>
      </wd-cell>
    </wd-cell-group>
  </view>
</template>

<script setup lang="ts">
import { getElectronicInfoAPI, getFileistAPI } from '@/service/index/foo'
const caseData = ref({
  id: '',
  number: '',
  fileType: '',
  acceptCard: '',
  acceptName: '',
  acceptPhone: '',
  caseNumber: '',
  caseName: '',
  status: '',
  proSignatureUrl: '',
  acceptSignatureUrl: '',
  auditingTime: '',
  openId: '',
  proRemark: '',
  acceptRemark: '',
})
const filesList = ref([])
const baseurl = import.meta.env.VITE_SERVER_BASEURL
const promotionlist = ref<any[]>([
  {
    value: '1',
    label: '起诉书',
  },
  {
    value: '2',
    label: '抗诉书',
  },
  {
    value: '3',
    label: '补充侦查决定书',
  },
  {
    value: '4',
    label: '证据清单',
  },
  {
    value: '5',
    label: '传票',
  },
  {
    value: '6',
    label: '量刑建议书',
  },
  {
    value: '7',
    label: '申诉复查决定书',
  },
  {
    value: '8',
    label: '检察建议书',
  },
  {
    value: '9',
    label: '其他',
  },
])
onLoad((options) => {
  getElectronicInfoAPI(options.id).then((res) => {
    caseData.value = Object.assign(unref(caseData), res.data)
  })
  getFileistAPI({ businessId: options.id, businessType: 'Dian' }).then((res) => {
    filesList.value = res.data.list
  })
})
function viewFileFn(fileUrl) {
  // 文件url 文件名 文件后缀
  uni.showLoading({ title: '加载中…', mask: true })

  const downloadTask = uni.downloadFile({
    url: baseurl + fileUrl,
    success: function (res) {
      console.log('downloadFile 成功', res)
      const tempFilePath = res.tempFilePath // 下载成功后的临时文件路径
      uni.openDocument({
        filePath: tempFilePath, // 打开新的文件路径
        showMenu: true,
        success: function (res) {
          console.log('openDocument 成功', res)
          uni.hideLoading()
        },
        fail: function (err) {
          console.log('openDocument 失败', err)
          uni.hideLoading()
        },
      })
    },
    fail: function (res) {
      console.log('downloadFile 失败', res)
      uni.hideLoading()
    },
  })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  width: 100%;
}

::v-deep .wd-cell__left {
  flex: none !important;
}
</style>
